<template>
  <div class="video-algorithm">
    <div class="video-header">
      <van-field
        readonly
        clickable
        label="测试数据"
        :value="selectData.text"
        placeholder="选择测试数据..."
        @click="selectingData = true"
      ></van-field>
      <van-popup v-model="selectingData" round position="bottom">
        <van-picker
          title="测试数据"
          show-toolbar
          :columns="dataColumn"
          @cancel="selectingData = false"
          @confirm="dataSelected"
        ></van-picker>
      </van-popup>
      <div class="video-container">
        <van-loading
          class="loading"
          size="44"
          v-show="isloading"
          type="spinner"
          color="#1989fa"
        />
        <video
          id="video"
          class="video-js vjs-default-skin vjs-big-play-centered"
          ref="video"
        ></video>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import { apiAxios } from '@/api/axios'
import Hls from 'hls.js'
import { closeSocket } from '@/utils/websocket'
@Component
export default class VideoAlgorithm extends Vue {
  @Prop()
  taskId!: string;

  selectData = { taskId: '', url: '', text: '' };
  selectingData = false;
  hls: any = null;
  player: any = null;
  isloading = false;
  dataColumn: any[] = [];

  created (): void {
    this.getVideoList()
  }

  beforeDestroy (): void {
    this.videoPause()

    // closeSocket()
  }

  async getVideoList (): Promise<void> {
    const videoList: any = await apiAxios.get(
      `/open/algorithm/video/list/${this.$route.path.split('/')[2]}`
    )
    if (videoList.code === 0) {
      this.dataColumn = videoList.data
    }
  }

  videoPause () {
    if (this.hls) {
      (this.$refs.video as any).pause()
      this.hls.destroy()
      this.hls = null
    }
  }

  getStream () {
    const videoRef: any = this.$refs.video
    this.isloading = true
    if (Hls.isSupported()) {
      this.hls = new Hls()
      this.hls.loadSource(this.selectData.url)
      this.hls.attachMedia(this.$refs.video)
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.play()
      })
      this.hls.on(
        Hls.ErrorDetails.LEVEL_LOAD_ERROR,
        (event: any, data: any) => {
          console.log('加载失败')
        }
      )
      this.hls.on(Hls.Events.BUFFER_APPENDED, (event: any, data: any) => {
        this.isloading = false
      })
    } else if (videoRef.canPlayType('application/vnd.apple.mpegurl')) {
      videoRef.src = this.selectData.url
      videoRef.addEventListener('loadedmetadata', () => {
        videoRef.play()
      })
    }
  }

  dataSelected (value: any): void {
    this.selectData = value

    this.selectingData = false
    this.$emit('dataOk', true)
    if (value.taskId !== this.taskId) {
      this.$emit('changeTaskId', value.taskId)
      this.$emit('changehasResult', false)
    }
    const video = document.getElementById('video') as HTMLElement
    video.style.display = 'block'
    this.getStream()
  }
}
</script>

<style lang="less" scoped>
.video-header {
  min-height: 21rem;
}
.video-line {
  height: 1rem;
  background-color: whitesmoke;
}

.video-container {
  position: relative;
  padding: 1rem;
  height: 15rem;
  user-select: none;
  #video {
    width: 100%;
    height: 100%;
    display: none;
  }
  .loading {
    position: absolute;
    z-index: 55;
    top: 40%;
    left: 50%;
  }
}
.btn-container {
  padding: 1.25rem;
}
/deep/ .vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}
</style>
